<template>
	<!--白名单组件-->
	<div class="white-list-box">
		<p class="top-text top-h">您好，</p>
		<p class="top-text">{{whiteListTopTip}}</p>
		<p class="tip">{{whiteListInputText}}</p>
		<div class="input-box">
			<input v-model="inputValue" type="text" name="" id="" value="" :placeholder="whiteListInputText" />
		</div>
		<div class="error-tip-box" v-if="isTip">
			<img src="../assets/images/white-list-tip.png" />
			<p>您未得到授权</p>
		</div>
		<div class="error-tip-box" v-if="isError">
			<img src="../assets/images/white-list-error.png" />
			<p>密码输入错误</p>
		</div>
		<div :class="[btnClass]" @click="clickCheckBtn">
			立即观看
		</div>
		<p class="back-btn" @click="backHome">返回首页</p>
	</div>
</template>

<script>
import { checkWhitelist , NewCheckWhitelist } from "@/util/api.js"
	export default {
		props: {
			type: String, //区分直播间 和回看
			whiteListInputText: String, //输入框提示文字
			whiteListTopTip: String, //头部提示文字
			roomVideoInfo:Object,
		},
		data() {
			return {
				inputValue: '', ////input输入框内容
				inputClass: 'input-gray', //输入框样式
				btnClass: 'btn-gray',
				isTip: false,
				isError: false,
				isprivateState:'',//2 老版本白名单  5 新版本白名单库
			}
		},
		watch: {
			//监听底部按钮颜色变化
			inputValue() {
				if(this.inputValue) { //输入框有值
					this.btnClass = "btn"
					this.inputClass = 'psd-input-gray'
					this.isTip = false;
					this.isError = false;
				} else {
					this.btnClass = "btn-gray"
				}
			}
		},
		created() {
			if(this.type == 'liveCom'){//直播间 
				const { isprivate } = this.roomVideoInfo.roomInfo;
                this.isprivateState = isprivate;
			}else if(this.type == 'lookBackCom'){//回看
				const { isprivate } = this.roomVideoInfo.videoInfo;
				this.isprivateState = isprivate;
			}
		},
		methods: {
			backHome() {
				this.$router.replace(`/${this.$channel}/home`);
			},
		    async  clickCheckBtn() {
				if(!this.inputValue.length) {
					fun.toastMessage("密码不能空")
					return
				}
				const  params = {
					roomId: this.$route.params.roomid,
					type: this.type == 'liveCom' ? '1' : '2', //1直播间 2视频库 3 付费课程(建投)
					vid: this.$route.params.id,
					whiteName: this.inputValue,
				};
				const newParams = {
					mixId:this.type == 'liveCom' ? this.$route.params.roomid : this.$route.params.id ,
					type: this.type == 'liveCom' ? '1' : '2',//1直播间 2视频库 3 付费课程(建投)
					whiteName:this.inputValue,
				}
				try {
					// this.isprivateState  2 老版本白名单  5 新版本白名单库  
					const dataMsg = this.isprivateState == 2 ? await checkWhitelist(params) : await NewCheckWhitelist(newParams);
					const { code ,msg } = dataMsg.data;
					if (code == "000000") { //验证成功
						this.$emit("sendFather", {
							type: "successWhiteList"
						});
					} else if (code == '300101') { //未得到授权
						this.isTip = true;
						this.inputValue = ''
					} else if (code == '300102') { //密码不正确
						this.isError = true;
						this.inputValue = ''
					}else{
						fun.toastMessage(msg)
					}
				} catch (error) {

				}
			}
		}

	}
</script>

<style scoped="scoped">
	.error-tip-box {
		font-size: 24px;
		font-weight: 400;
		color: #E02020;
		line-height: 33px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 60px;
		margin-top: 15px;
		float: left;
	}
	
	.error-tip-box img {
		width: 32px;
		height: 32px;
		margin-right: 5px;
	}
	
	.white-list-box {
		width: 100vw;
		height: 100vh;
		background: white;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1200;
	}
	
	.top-text {
		font-size: 48px;
		font-weight: 500;
		color: #27344C;
		line-height: 70px;
		margin-left: 60px;
		width: 690px;
		/*overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;*/
	}
	
	.top-h {
		margin-top: 210px;
	}
	
	.tip {
		font-size: 28px;
		font-weight: 400;
		color: #27344B;
		line-height: 34px;
		margin: 84px 0 0 60px;
		width: 690px;;
	}
	
	.input-box {
		width: 630px;
		height: 76px;
		/*background: salmon;*/
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 16px 0 0 60px;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}
	
	.input-box input {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.btn {
		width: 630px;
		height: 96px;
		background: #E8340A;
		border-radius: 4px;
		margin: 162px 0 0 60px;
		text-align: center;
		line-height: 96px;
		color: white;
		font-weight: 400;
		font-size: 36px;
		box-shadow: 0 14px 25px #FFD9D0;
		border-radius: 4px;
	}
	
	.btn-gray {
		width: 630px;
		height: 96px;
		background: rgba(255, 166, 145, 1);
		border-radius: 4px;
		margin: 162px 0 0 60px;
		text-align: center;
		line-height: 96px;
		color: white;
		font-weight: 400;
		font-size: 36px;
		box-shadow: 0 14px 25px #FFD9D0;
		border-radius: 4px;
	}
	
	.back-btn {
		font-size: 28px;
		font-weight: 400;
		color: #9FA4AD;
		line-height: 34px;
		text-align: center;
		margin-top: 32px;
	}
</style>